<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>


    <!--额外的样式-->

    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">

    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/ionicons.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">


    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">


    <link rel="stylesheet" href="userinfo/css/favorite.css">
    <!-- 重置样式 -->
    <link rel="stylesheet" href="userinfo/css/reset.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="userinfo/css/base.css">
    <!-- 当前头部样式 -->
    <link rel="stylesheet" href="userinfo/css/header.css">
    <!-- 图标库 -->
    <link rel="stylesheet" href="userinfo/iconfont/iconfont.css">
    <!-- 底部样式表 -->
    <link rel="stylesheet" href="userinfo/css/footer.css">
    <!-- 图标库 -->
    <link rel="stylesheet" href="userinfo/iconfooter/iconfont.css">
    <script src="userinfo/iconfooter/iconfont.js"></script>
    <!-- layui -->
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- 头部图标 -->
    <link rel="shortcut icon" href="userinfo/icon/favicon.ico" type="image/x-icon">
    <style>
        .ismain-checked {
            background-color: yellow; /* 示例样式，可按需修改 */
        }

        .order_box_in {
            width: 100%;
            height: 170px;
            margin-left: 3px;
            margin-bottom: 20px;
            float: none;
            border: 1px solid #C9C5C5;
            border-radius: 5px;
            cursor: pointer;
            box-sizing: border-box; /* 确保边框和内边距不会影响宽度 */
        }

        .order_box::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <style>
        .order_box_in {
            border: 1px solid #C9C5C5;
            padding: 10px;
        }

        .addressname {
            height: 20px;
            font-weight: bold;
            color: orangered;
            text-align: center;
            font-size: 20px;
            padding: 5px;
        }
        [name='addressbox'] {
            width: 500px; /* 占满父容器宽度 */
            margin: 0 auto; /* 水平居中，可根据需要调整 */
        }

        .areatext {
            height: 15px;
            color: dodgerblue;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }

        .addresstext {
            height: 15px;
            color: dodgerblue;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }

        .addrname {
            height: 15px;
            color: darkgreen;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }

        .addrtel {
            height: 15px;
            color: dodgerblue;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .orderbody {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: block;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .order-div {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .order-info {
            display: flex;
            gap: 20px;
        }

        .order-item {
            display: flex;
            flex-direction: column;
        }

        .order-item label {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .order-item span {
            color: #666;
        }

        .checkout-button,.get-button {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .checkout-button:hover,.get-button:hover {
            background-color: #0056b3;
        }



    </style>
</head>

<body class="goto-here">

<!-- 顶部导航条 -->
<div class="py-1 bg-black">
    <div class="container">
        <div class="row no-gutters d-flex align-items-start align-items-center px-md-0">
            <div class="col-lg-12 d-block">
                <div class="row d-flex">
                    <div class="col-md pr-4 d-flex topper align-items-center">
                        <div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-phone2"></span></div>
                        <span class="text">+ 1235 2355 98</span>
                    </div>
                    <div class="col-md pr-4 d-flex topper align-items-center">
                        <div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-paper-plane"></span></div>
                        <span class="text">youremail@email.com</span>
                    </div>
                    <div class="col-md-5 pr-4 d-flex topper align-items-center text-lg-right">
                        <span class="text">3-5 Business days delivery &amp; Free Returns</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container">
        <a class="navbar-brand" href="javascript:;">"鞋梦弄潮"鞋子商城</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="oi oi-menu"></span> Menu
        </button>

        <div class="collapse navbar-collapse" id="ftco-nav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active"><a href="shopping/index" class="nav-link">Home</a></li>
                <li class="nav-item"><a class="nav-link" id="headUserinfobutton" href="shopping/userinfo">userinfo</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="javascript:;" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cataloge</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown04">
                        <a class="dropdown-item" href="shopping/shop">Shop</a>
                        <a class="dropdown-item" id="headCartbutton" href="shopping/cart">Cart</a>
                    </div>
                </li>
                <li class="nav-item"><a href="shopping/about" class="nav-link">About</a></li>
                <li class="nav-item cta cta-colored"><a href="shopping/cart" id="headCartbutton1" class="nav-link"><span class="icon-shopping_cart"></span>[0]</a></li>

            </ul>
        </div>
    </div>
</nav>
<!-- END nav -->

<div class="hero-wrap hero-bread" style="background-image: url('image/bg_6.jpg');">
    <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
            <div class="col-md-9 ftco-animate text-center">
                <h1 class="mb-0 bread">My Account</h1>
            </div>
        </div>
    </div>
</div>


<!-- 主页面 -->
<main class="mi-user-favoritepage-main  clearfix">
    <div class="container">
        <div class="row" style="display: flex" >
            <!-- 左边选项 -->
            <div class="span4">
                <div class="user-address-menu">
                    <!-- 订单中心 -->
                    <div class="menu-box">
                        <h3 class="title">
                            个人中心
                        </h3>
                        <ul class="list">
                            <li><a href="javascript:;" _box="myinfo">我的信息</a></li>
                            <li><a href="javascript:void(0);" _box="address">收货地址</a></li>
                            <li><a href="javascript:void(0);" _box="password">修改密码</a></li>
                            <li><a href="javascript:void(0);" _box="order">我的订单</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 右边商品 -->
            <div class="span16" style="width: 700px;margin-left: 30px">
                <div class="mi-uc-box">
                    <!--我的信息-->
                    <div class="uc-content-box" _win="myinfo">
                        <div class="uc-content">
                            <div class="box-hd">
                                <h1 class="title">我的信息</h1>
                            </div>
                            <div class="box-bd">
                                <div class="xm-goods-list-wrap">
                                    <div class="layui-form" lay-filter="userinfo">
                                        <div class="layui-form-item">
                                            <div class="layui-input-inline">
                                                <img src="" id="userimg"
                                                     style="height:100px;width:100px;cursor: pointer;">
                                                <input type="hidden" name="imgurl" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">用户名</label>
                                            <div class="layui-input-inline">
                                                <input type="text" readonly name="username" class="layui-input">
                                            </div>

                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">电话</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="phone" placeholder="请输入手机号"
                                                       lay-verify="required|phone" class="layui-input">
                                            </div>
                                        </div>
                                        <button style="margin-left: 100px" class="layui-btn layui-btn-radius layui-btn-normal" type="button" lay-submit lay-filter="saveuser">提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--收货地址-->
                    <div class="uc-content-box" _win="address">
                        <div class="uc-content">
                            <div class="box-hd">
                                <h1 class="title">收货地址（请选中默认为收货地址）</h1>
                            </div>
                            <div class="box-bd">
                                <div class="xm-goods-list-wrap">
                                    <div class="order_box" name="addressbox">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--修改密码-->
                    <div class="uc-content-box" _win="password">
                        <div class="uc-content">
                            <div class="box-hd">
                                <h1 class="title">修改密码</h1>
                            </div>
                            <div class="box-bd">
                                <div class="xm-goods-list-wrap">
                                    <div class="layui-form" lay-filter="changepassword">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">原密码</label>
                                            <div class="layui-input-inline">
                                                <input type="password" name="oldpassword" placeholder="请输入原密码" lay-verify="required" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">新密码</label>
                                            <div class="layui-input-inline">
                                                <input type="password" name="newpassword" placeholder="请输入新密码" lay-verify="required" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">确认新密码</label>
                                            <div class="layui-input-inline">
                                                <input type="password" name="confirmpassword" placeholder="请再次输入新密码" lay-verify="required" class="layui-input">
                                            </div>
                                        </div>
                                        <button type="button" style="margin-left: 100px" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="savepassword">提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--我的订单-->

                    <div class="orderbody" _win="order" name="orderbox"></div>
                </div>
            </div>
        </div>
    </div>
</main>



<footer class="ftco-footer ftco-section">
    <div class="container">
        <div class="row">
            <div class="mouse">
                <a href="javascript:;" class="mouse-icon">
                    <div class="mouse-wheel"><span class="ion-ios-arrow-up"></span></div>
                </a>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-md">
                <div class="ftco-footer-widget mb-4">
                    <h2 class="ftco-heading-2">Minishop</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
                    <ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
                        <li class="ftco-animate"><a href="javascript:;"><span class="icon-twitter"></span></a></li>
                        <li class="ftco-animate"><a href="javascript:;"><span class="icon-facebook"></span></a></li>
                        <li class="ftco-animate"><a href="javascript:;"><span class="icon-instagram"></span></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md">
                <div class="ftco-footer-widget mb-4 ml-md-5">
                    <h2 class="ftco-heading-2">Menu</h2>
                    <ul class="list-unstyled">
                        <li><a href="javascript:;" class="py-2 d-block">Shop</a></li>
                        <li><a href="javascript:;" class="py-2 d-block">About</a></li>
                        <li><a href="javascript:;" class="py-2 d-block">Journal</a></li>
                        <li><a href="javascript:;" class="py-2 d-block">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class="ftco-footer-widget mb-4">
                    <h2 class="ftco-heading-2">Help</h2>
                    <div class="d-flex">
                        <ul class="list-unstyled mr-l-5 pr-l-3 mr-4">
                            <li><a href="javascript:;" class="py-2 d-block">Shipping Information</a></li>
                            <li><a href="javascript:;" class="py-2 d-block">Returns &amp; Exchange</a></li>
                            <li><a href="javascript:;" class="py-2 d-block">Terms &amp; Conditions</a></li>
                            <li><a href="javascript:;" class="py-2 d-block">Privacy Policy</a></li>
                        </ul>
                        <ul class="list-unstyled">
                            <li><a href="javascript:;" class="py-2 d-block">FAQs</a></li>
                            <li><a href="javascript:;" class="py-2 d-block">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md">
                <div class="ftco-footer-widget mb-4">
                    <h2 class="ftco-heading-2">Have a Questions?</h2>
                    <div class="block-23 mb-3">
                        <ul>
                            <li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
                            <li><a href="javascript:;"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
                            <li><a href="javascript:;"><span class="icon icon-envelope"></span><span class="text">info@yourdomain.com</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">

                <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
            </div>
        </div>
    </div>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"></circle><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"></circle></svg></div>



<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/scrollax.min.js"></script>

<script src="js/google-map.js"></script>
<script src="js/main.js"></script>


<!--引入底部js -->

<!--新增地址栏-->
<div style="display: none" id="addAddressWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">地址名称</label>
        <div class="layui-input-inline">
            <input type="text" name="addressname" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode" lay-filter="provincecode"></select>
            <input type="hidden" name="province">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode" lay-filter="citycode"></select>
            <input type="hidden" name="city">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区划</label>
        <div class="layui-input-inline">
            <select name="areacode" lay-filter="areacode"></select>
            <input type="hidden" name="area">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" name="name" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" style="margin-left: 100px" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="addAddressBtn">提交</button>
    </div>
</div>
<!--修改地址栏-->
<div style="display: none" id="editAddressWin" lay-filter="editAddress" class="layui-form">
    <input type="hidden" name="id" class="layui-input">
    <div class="layui-form-item">
        <label class="layui-form-label">地址名称</label>
        <div class="layui-input-inline">
            <input type="text" name="addressname" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode" lay-filter="provincecode"></select>
            <input type="hidden" name="province">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode" lay-filter="citycode"></select>
            <input type="hidden" name="city">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区划</label>
        <div class="layui-input-inline">
            <select name="areacode" lay-filter="areacode"></select>
            <input type="hidden" name="area">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" name="name" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" style="margin-left: 100px" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="editAddressBtn">提交</button>
    </div>
</div>


<!--信息对话框-->
<div style="display:none" id="editWin" lay-filter="editWin" class="layui-form">
    <input name="id" type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <textarea type="text" name="address" required lay-verify="required"  autocomplete="off" class="layui-input" ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <textarea type="text" name="phone" required lay-verify="required"  autocomplete="off" class="layui-input" ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收货人设定地址</label>
        <div class="layui-input-inline">
            <textarea type="text" name="name" required lay-verify="required"  autocomplete="off" class="layui-input"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">具体信息：</label>
        <div class="layui-input-inline">
            <textarea type="text" name="msg" required lay-verify="required"  autocomplete="off" class="layui-input"></textarea>
        </div>
    </div>
</div>


<!--订单模板-->
<script type="text/html" id="orderitem" style="width: 100%;margin-bottom: 10px;">
    <div class="order-div">
        <div class="order-info">
            <div class="order-item ordercode">
                <label>订单编号:</label>
                <span>OD123456</span>
            </div>
            <div class="order-item orderstate">
                <label>订单状态:</label>
                <span>智能手表</span>
            </div>
            <div class="order-item ordermoney">
                <label>订单金额:</label>
                $<span>299.99</span>
            </div>
            <div class="order-item orderaddtime">
                <label>下单时间:</label>
                <span>2024-10-15 14:30:00</span>
            </div>
        </div>
        <button class="checkout-button">结算</button>
        <!-- 新增的确认收货按钮 -->
        <button class="get-button" style="display: none;">确认收货</button>
        <button class="check-info">订单详情</button>

    </div>




</script>


<script src="userinfo/js/template-web.min.js"></script>
<script src="userinfo/js/jquery.min.js"></script>
<script src="userinfo/js/favorite.js"></script>
<script src="userinfo/js/footer.js"></script>

<script src="userinfo/js/header.js"></script>

<script src="layui/layui.all.js"></script>


<script type="text/html" id="addressitem">
    <div class='order_box_in layui-form'>

        <div><input class="addressid" type="hidden"/></div>
        <div class='addressname' style="">

        </div>
        <div  style="margin-top:8px">
            地址:<span class="areatext"></span>
        </div>
        <div class='' style="margin-top:8px;">
            详细地址:<span class="addresstext"></span>
        </div>
        <div class='layui-row' style="margin-top:8px;">
            <div class=' layui-col-md6'>
                联系人:<span class="addrname"></span>
            </div>
            <div class=' layui-col-md6'>
                联系电话:<span class="addrtel"></span>
            </div>
        </div>
        <div  style="margin-top:8px" class="layui-row">
            <div class="layui-col-md6 " >
                <input type='radio'  name="ismain" value="0" _addrid=''>
            </div>
            <div class="layui-col-md6 addressbtn" style="text-align: right;">
                <button type='button' _addrid name='edit' lay-event="edit"
                        class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">编辑
                </button>
                <button type='button' _addrid name='delete' lay-event="delete"
                        class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">删除
                </button>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="addAddress">
    <div class='order_box_in layui-form' addAddress style="text-align: center;line-height: 170px;font-size: 30px">
        +
    </div>
</script>




<script>

    function sleep(ms) {
        const start = Date.now();
        while (Date.now() - start < ms) {
            // 空循环，等待时间流逝
        }
    }


    //点击左侧组件   _box
    //在右侧显示对应的窗口信息   _win
    const $ = layui.$;
    const form = layui.form;
    const upload = layui.upload;
    //初始状态
    $("[_win]").hide();
    $("[_win]:first").show();
    showmyinfo();
    //事件监听
    $("[_box]").click(function () {
        $("[_win]").hide();
        let val = $(this).attr("_box");
        if (val == 'myinfo') {
            showmyinfo();
        }
        $("[_win='" + val + "']").show();
        if (val == 'address'){showAddress();}
    });

    /*获取用户信息*/
    function showmyinfo() {
        //查询用户数据
        $.ajax({
            url: 'user/getuserinfo',
            success: function (result) {
                let data = result.data;
                let code = result.code;
                let msg = result.msg;
                if (code == 401) {
                    layer.msg(msg, {icon: 2});
                    setTimeout(function () {
                        location.href = "shopping/login";
                    }, 2000);
                } else if (code != 200) {
                    layer.msg(msg, {icon: 2});
                } else {
                    //将用户数据显示到页面上
                    form.val("userinfo", data);
                    $("#userimg").attr("src", data.imgurl);
                }
            }
        });
    }

    form.on("submit(saveuser)", function (obj) {
        let formdata = obj.field;
        $.ajax({
            url: 'user/edit',
            data: formdata,
            success: function (result) {
                layer.msg("保存成功", {icon: 1, time: 1800});
            }
        });
        return false;
    });

    upload.render({
        elem: "#userimg",
        url: "file/uploadUserImg",
        done: function (res, index, upload) {
            layer.msg("上传成功", {icon: 1, time: 1800});
            let imgurl = res.data[0].src;
            $("#userimg").attr("src", imgurl);
            $("[name='imgurl']").val(imgurl);

        }
    })

    /*地址复选框*/
    // 修改 showArea 函数，添加回调函数
    function showArea(code, $dom, callback) {
        sleep(300);

        $.ajax({

            url: "https://restapi.amap.com/v3/config/district",
            async:false,
            data: { key: 'c1af0183a6f70f28c8c07a80fed28655', keywords: code },
            success: function (result) {

                console.log(result);
                let children = result.districts[0].districts;
                $dom.empty();
                $dom.append($("<option value=''></option>"));
                for (let i = 0; i < children.length; i++) {
                    $dom.append($("<option value='" + children[i].adcode + "'>" + children[i].name + "</option>"));
                }
                form.render("select");
                if (callback) {
                    callback();
                }
            },
            error: function (error) {
                console.error('获取地区数据出错:', error);
                if (callback) {
                    callback();
                }
            }
        });
    }  // showArea(100000, $("[name='provincecode']"));
    form.on('select(provincecode)', function (data) {
        let provincecode = data.value; //得到被选中的值
        showArea(provincecode, $("[name='citycode']"));
        let provincename = $(data.othis).find("input").val();
        $("[name='province']").val(provincename);
    });
    form.on('select(citycode)', function (data) {
        let citycode = data.value; //得到被选中的值
        showArea(citycode, $("[name='areacode']"));
        let cityname = $(data.othis).find("input").val();
        $("[name='city']").val(cityname);
    });
    form.on('select(areacode)', function (data) {
        let areaname = $(data.othis).find("input").val();
        $("[name='area']").val(areaname);
    });

    var editlayer;
    var addlayer;
    $("[name='addressbox']").on("click", "[addAddress]", function () {
        $("[name='addressbox']").empty();
        showArea(100000, $("[name='provincecode']"));
        addlayer = layer.open({
            type: 1,
            area: ["400px", "600px"],
            content: $("#addAddressWin"),
            zIndex: 1000,// 设置弹出层的 z-index，确保层级足够高
        });

    });







    //新增收货地址保存
    form.on("submit(addAddressBtn)", function (obj) {

        $("[name='addressbox']").empty();
        let formdata = obj.field;
        $.ajax({
            url: 'address/add',
            data: formdata,
            async:false,
            success: function (result) {
                layer.msg("添加成功", {icon: 1, time: 1800});
                layer.close(addlayer);
            }
        });
        showAddress();
    });

    //编辑收货地址保存
    form.on("submit(editAddressBtn)", function (obj) {
        let formdata = obj.field;
        $.ajax({
            url: 'address/edit',
            data: formdata,
            async:false,
            success: function (result) {
                layer.msg("编辑成功", {icon: 1, time: 1800});
                layer.close(editlayer);

                showAddress();
            }
        });

    });






    function showAddress() {
        $.ajax({
            url: "address/getaddressbyuserid",
            success: function (result) {
                $("[name='addressbox']").empty();
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let itemtext = $("#addressitem").text();
                    let $item = $(itemtext);
                    $item.find(".addressid").text(data[i].id);
                    $item.find("[name='ismain']").text(data[i].ismain);
                    $item.find(".addressname").text(data[i].addressname);
                    $item.find(".areatext").text(data[i].province + "-" + data[i].city + "-" + data[i].area);
                    $item.find(".addresstext").text(data[i].address);
                    $item.find(".addrname").text(data[i].name);
                    $item.find(".addrtel").text(data[i].phone);
                    if (data[i].ismain === 1) {
                        $item.find("[type='radio']").prop("checked", true);
                        $item.addClass('ismain-checked'); // 添加样式类
                    } else {
                        $item.find("[type='radio']").prop("checked", false);
                        $item.removeClass('ismain-checked'); // 移除样式类
                    }
                    $("[name='addressbox']").append($item);
                    // 为编辑按钮绑定数据
                    $item.find("[name='edit']").data('addressData', data[i]);
                    $item.find("[name='delete']").data('addressData', data[i]);

                    // 为.order_box_in 绑定点击事件，排除编辑和删除按钮
                    $item.click(function (e) {
                        if (!$(e.target).is('button')) {
                            let radio = $(this).find("[type='radio']");
                            // 取消其他所有单选框的选中状态，并移除样式类
                            $("[name='addressbox'] [type='radio']").not(radio).prop('checked', false).parent().parent().parent().removeClass('ismain-checked');
                            $("[name='addressbox'] [type='radio']").not(radio).val(0);
                            radio.prop("checked", true);
                            radio.val(1); // 将选中的单选框的值设为 1
                            radio.parent().parent().parent().addClass('ismain-checked'); // 为选中的单选框所在的父元素添加样式类


                            // 发送 AJAX 请求更新 ismain 状态
                            $.ajax({
                                url: 'address/updateIsMain',
                                data: {
                                    id: data[i].id,
                                },
                                success: function(response) {
                                    if (response.code === 200) {
                                        console.log('地址状态更新成功');
                                    } else {
                                        console.error('地址状态更新失败:', response.msg);
                                    }
                                },
                                error: function(error) {
                                    console.error('请求出错:', error);
                                }
                            });
                        }
                    });
                }

                // 事件委托绑定编辑按钮点击事件
                $("[name='addressbox']").on('click', "[name='edit']", function () {

                    const addressData = $(this).data('addressData');
                    const loadProvince = new Promise((resolve) => {
                        showArea(100000, $("[name='provincecode']"), resolve);
                    });

                    loadProvince.then(() => {

                        editlayer = layer.open({
                            type: 1,
                            area: ["400px", "600px"],
                            content: $("#editAddressWin"),
                            zIndex: 1000,// 设置弹出层的 z-index，确保层级足够高

                        });
                        $('.layui-layer-shade').remove();


                        // 先设置表单值
                        form.val("editAddress", addressData);



                        // 设置省份下拉框选中项
                        $("#editAddressWin [name='provincecode'] option[value='" + addressData.provincecode + "']").prop('selected', true);
                        form.render('select');

                        // 设置城市下拉框选中项
                        const provincecode = addressData.provincecode;
                        const loadCity = new Promise((resolve) => {
                            showArea(provincecode, $("[name='citycode']"), resolve);
                        });


                        loadCity.then(() => {
                            $("#editAddressWin [name='citycode'] option[value='" + addressData.citycode + "']").prop('selected', true);
                            form.render('select');
                        });

                        // 设置区划下拉框选中项
                        const citycode = addressData.citycode;
                        const loadArea = new Promise((resolve) => {
                            showArea(citycode, $("[name='areacode']"), resolve);
                        });

                        loadArea.then(() => {
                            $("#editAddressWin [name='areacode'] option[value='" + addressData.areacode + "']").prop('selected', true);
                            form.render('select');
                        });

                        form.render('select');
                    });
                });



                // 事件委托绑定删除按钮点击事件
                $("[name='addressbox']").on('click', "[name='delete']", function () {
                    let addressData = $(this).data('addressData');
                    layer.confirm("确认要删除吗?", function () {
                        $.ajax({
                            url: 'address/delete',
                            data: { id: addressData.id },
                            success: function () {
                                layer.msg("删除成功", { time: 1800, icon: 1 });
                                showAddress();
                            }
                        });
                    });
                });

                if (data.length < 6) {
                    let itemtext = $("#addAddress").text();
                    let $item = $(itemtext);
                    $("[name='addressbox']").append($item);
                }
            }
        });
    }
</script>

<script>
    layui.use(['form'], function () {
        var form = layui.form;

        // 监听修改密码表单提交事件
        form.on('submit(savepassword)', function (data) {
            // 获取表单数据
            var formData = data.field;

            console.log(formData);

            // 发送 AJAX 请求
            $.ajax({
                url: 'user/changePassword', // 后端处理密码修改的接口地址
                data: formData,
                success: function (response) {
                    if (response.code === 200) {
                        layer.msg('密码修改成功！');
                        // 可以在这里添加跳转到登录页面或其他操作
                    } else {
                        layer.msg(response.msg);
                    }
                },
                error: function (error) {
                    layer.msg('网络错误，请稍后重试！');
                    console.error('AJAX 请求出错:', error);
                }
            });

            return false; // 阻止表单默认提交行为
        });
    });
</script>
<!--
获取订单-->
<script>
    $("[_box='order']").click(function (){
        $.ajax({
            url: "orders/mycheck",
            success: function (result) {
                console.log(result);
                $("[name='orderbox']").empty();
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let itemtext = $("#orderitem").text();
                    let $item = $(itemtext);
                    $item.find(".order-info .ordercode span").text(data[i].code);
                    $item.find(".order-info .ordermoney span").text(data[i].money);
                    let state;
                    switch (data[i].state) {
                        case 0:
                            $item.find(".checkout-button").show();
                            $item.find(".get-button").hide();
                            state = '未支付';
                            break;
                        case -1:
                            $item.find(".checkout-button").hide();
                            $item.find(".get-button").hide();
                            state = '已失效';
                            break;
                        case 1:
                            state = '待发货';
                            $item.find(".checkout-button").hide();
                            $item.find(".get-button").hide();
                            break;
                        case 2:
                            state = '待收货';
                            $item.find(".get-button").show();
                            $item.find(".checkout-button").hide();
                            break;
                        case 3:
                            state = '已完成订单';
                            $item.find(".checkout-button").hide();
                            $item.find(".get-button").hide();
                            break;
                        default:
                            state = '未知状态';
                            break;
                    }
                    $item.find(".order-info .orderstate span").text(state);
                    $item.find(".order-info .orderaddtime span").text(data[i].addtime);
                    // 为结算按钮绑定点击事件
                    $item.find(".checkout-button").click(function () {
                        let productids='';
                        let counts='';

                        data[i].infos.forEach(function(item){
                            let proid=String(item.productid);
                            let count=String(item.quantity);
                            productids+=(proid+",");
                            counts+=(count+",");
                        });
                        productids=productids.substring(0,productids.length-1);
                        counts=counts.substring(0,counts.length-1);
                        //准备好数据
                        location.href="shopping/checkout?productids="+productids+"&counts="+counts;
                    });

                    // 为结算按钮绑定点击事件
                    $item.find(".get-button").click(function () {
                        $.ajax({
                            url:"orders/get",
                            data:{orderid:data[i].id,
                            },
                            success:function(result){
                                    layer.msg("已确认收货！",{icon:1,time:1800});
                                // 重新调用获取订单的函数，重新渲染订单列表
                                $("[_box='order']").click();
                                $(this).hide();
                            },
                        });
                    });

                    //为详情按钮绑定点击事件
                    $item.find(".check-info").click(function () {
                        $.ajax({
                            // 发送删除请求的 URL，这里是删除分类的接口
                            url: 'orders/getaddress',
                            // 发送的数据，包含要删除的分类的 ID
                            data: { orderid: data[i].id },
                            // 请求成功后的回调函数
                            success: function (result) {
                                form.val("editWin",result.data);
                                form.val("editWin",result);
                                //回显图片
                                layer.open({
                                    type:1,
                                    title:'详情',
                                    area:['400px','400px'],
                                    content:$("#editWin")
                                });

                            }
                        });
                    });

                    $("[name='orderbox']").append($item);
                }
            }
        });
    })
</script>

<script>

    function showCartCount() {
        $.ajax({
            url: 'cart/showCartCount',
            async: false,
            success: function (result) {

                console.log(result);

                let data = result.data;
                if (!data)
                {
                    $("#headCartbutton1").text("CART["+0+"]");

                }else {
                    $("#headCartbutton1").text("CART["+data+"]");
                }

            }
        });
    }  //这是顶部导航栏的购物车参数展示
    showCartCount();
</script>

</body>

</html>